<template>
  <div class="box">
    <div class="heart">
      <div class="head">
        <span v-if="setup == '修改店铺信息'" @click="exit">返回</span>
      </div>
      <div class="title">
        <span>{{ setup }}</span>
      </div>
      <h1>店铺名称</h1>
      <el-input placeholder="请输入店铺名称" v-model="name" clearable />
      <h1>店铺地址</h1>
      <el-input placeholder="请输入店铺地址" v-model="address" clearable />
      <h1>店铺标志</h1>
      <!-- action 必选参数，上传的地址 -->
      <!-- name 跟后端对上file 重要 -->
      <!-- accept 上传的文件的类型 后缀名 -->
      <!-- limit 允许上传的最大的个数 -->
      <!-- on-remove 执行函数钩子删除 -->
      <!-- on-success="Success 成功上传钩子功能 -->
      <!-- multiple 上传文件是否多选 -->
      <!-- on-error 文件出错的钩子 -->
      <!-- before-upload="Upload 钩子函数，上传的文件作为其参数上传。（上传时触发）如果拒绝，则上传将被终止 -->
      <!-- file-list="LOGO" 上传的文件列表 -->
      <!-- drag 拖拽上传 -->
      <el-upload :action="action" list-type="picture-card" name="file" accept=".jpg,.jpag.png,.webp,.jfif," :limit="1"
        :on-remove="Remove" :on-success="Success" :on-error="onerror" :on-preview="handlepreview" :before-upload="Upload"
        :file-list="logo" :multiple="false" :show-file-list="false">
        <!-- 上传成功现实的图片 -->
        <img v-if="imageUrl" :src="imageUrl" class="picture" />
        <!-- 没有上传的时候显示的图片 -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <!--  -->
      <el-dialog :visible.sync="dia">
        <img :src="imageUrl" />
      </el-dialog>
      <!-- <el-button @click="dialog">点击放大</el-button> -->
      <div class="submit">
        <el-button type="success" @click="bTns(butn)">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      action: this.URL.m().uploadres,
      butn: "", // 提交修改
      name: "", // 店铺名称
      logo: [], //文件
      address: "", // 店铺地址
      imageUrl: "", // 店铺头像
      id: "", // 上个页面的id
      dia: false,
      setup: "", // 标签主题
    };
  },
  methods: {
    // 图片放大
    dialog() {
      this.dia = true;
    },
    // 提交
    bTns(is) {
      const obj = {
        id: this.id,
        name: this.name,
        address: this.address,
        logo: JSON.stringify(this.logo),
      };
      if (is == "提交") {
        this.public_upload(obj, is, this.URL.m().uploadshop);
      } else {
        // 修改
        this.public_upload(obj, is, this.URL.m().modifyshop);
      }
    },
    // 公共上传提交或者修改商家店铺信息
    async public_upload(obj, is, url) {
      try {
        let res = await new this.request(url, JSON.stringify(obj)).POST();
        if (res.status !== 200) {
          this.Message_Box.MessageError("提交失败");
        } else {
          localStorage.setItem("company", JSON.stringify(obj));
          if (is == "提交") {
            this.Message_Box.MessageSuccess("提交成功");
            this.$router.push({ name: "store" });
          } else {
            this.Message_Box.MessageSuccess("修改成功");
            this.$router.push({ name: "store" });
          }
        }
      } catch (error) {
        this.Message_Box.MessageError("程序错误");
      }
    },
    // 路由跳转
    exit(){
      this.$router.push({ name: "store" })
    },
    // 成功上传钩子功能
    Success(res, response, file) {
      this.logo.push({ url: res.data, uid: file.uid });
      this.imageUrl = URL.createObjectURL(response.raw);
    },
    // 错误钩子
    onerror(err, file) {
      console.log(err, file, "上传失败-err");
      this.Message_Box.MessageError("上传失败，请重新上传");
    },
    // 上传图片展开大图
    handlepreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除钩子
    Remove(file, fileList) {
      this.logo = [];
      console.log(file, fileList, "删除文件-rem");
      this.Message_Box.MessageSuccess('删除成功');
    },
    // 点击上传时触发
    Upload(file) {
      console.log(file);
    },
  },
  // 函数生命周期周期钩子
  created() {
    // 后去路由传值
    let res = this.$route.params.company;
    if (res == undefined) {
      this.butn = "提交";
      this.setup = "注册店铺信息";
    } else {
      this.butn = "修改";
      this.setup = "修改店铺信息";
      this.id = res._id;
      this.name = res.name;
      this.address = res.address;
      let imageUrl = res.logo;
      if (typeof imageUrl == 'string') {
        this.imageUrl = JSON.parse(imageUrl)[0].url
      } else {
        this.imageUrl = res.logo[0].url
      }
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f6f8f9;
}

// 背景
.heart {
  position: absolute;
  left: 50%;
  width: 1000px;
  height: 100%;
  padding: 30px 60px 0 60px;
  transform: translate(-500px);
  background-color: #ffffff;
}

// 头部
.head,
.title {
  width: 100%;
  font-weight: 800;
  font-size: 22px;
}

.head {
  cursor: pointer;
  text-align: right;
}

.head span {}

.title,
.submit {
  text-align: center;

}

// 主体部分
h1 {
  margin: 20px 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.picture {
  width: 240px;
  height: 240px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  display: inline;
  line-height: 145px;
  text-align: center;
}

.submit {
  margin-top: 180px;
}

.submit button {
  width: 90px;

}
</style>